<template>
  <div>
    <a-select
      ref="select"
      v-model:value="value1"
      style="width: 120px"
      @focus="focus"
      @change="handleChange"
    >
      <a-select-option value="jack">Jack</a-select-option>
      <a-select-option value="lucy">Lucy</a-select-option>
      <a-select-option
        value="disabled"
        disabled
      >Disabled</a-select-option>
      <a-select-option value="Yiminghe">yiminghe</a-select-option>
    </a-select>
    <br />
    <a-select
      v-model:value="value"
      mode="tags"
      style="width: 100%"
      placeholder="Tags Mode"
      :options="options"
      @change="handleChange"
    ></a-select>
    <a-select
      v-model:value="value"
      mode="tags"
      style="width: 100%"
      placeholder="Tags Mode"
      :token-separators="[',']"
    ></a-select>
    <a-select
      :max-tag-count="10"
      :max-tag-text-length="1"
      v-model:value="value"
      mode="multiple"
      label-in-value
      style="width: 100%"
      :options="[...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }))"
      placeholder="Please select"
      @change="handleChange"
    ></a-select>
    <br>
    <a-select
      v-model:value="value"
      style="width: 200px"
      @change="handleChange"
      show-search
      placement="topLeft"
    >
      <template #suffixIcon>你好</template>
      <a-select-opt-group>
        <template #label>
          <span>
            Manager
          </span>
        </template>
        <a-select-option value="jack">Jack</a-select-option>
        <a-select-option value="lucy">Lucy</a-select-option>
      </a-select-opt-group>
      <a-select-opt-group label="Engineer">
        <a-select-option value="Yiminghe">yiminghe</a-select-option>
        <a-select-option value="Yiminghe1">yiminghe1</a-select-option>
      </a-select-opt-group>
    </a-select>
    <a-select
      v-model:value="selectedItems"
      mode="multiple"
      placeholder="Inserted are removed"
      style="width: 100%"
      :options="filteredOptions.map(item => ({ value: item }))"
    ></a-select>
    <a-select
      ref="select"
      v-model:value="value"
      style="width: 120px"
      :options="options1"
      :field-names="{ label: 'name', value: 'id', options: 'children' }"
      status="warning"
    ></a-select>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      value: [],
      value1: '',
      options: [],
      selectedItems: [],
      OPTIONS: ['Apples', 'Nails', 'Bananas', 'Helicopters'],
      options1: [
        {
          id: 'jack',
          name: 'Jack',
          children: [
            {
              id: 'small jack',
              name: 'samll Jack',
            },
          ],
        },
        {
          id: 'lucy',
          name: 'Lucy',
        },
        {
          id: 'disabled',
          name: 'Disabled',
          disabled: true,
        },
        {
          id: 'yiminghe',
          name: 'Yiminghe',
        },
      ],
    }
  },
  computed: {
    filteredOptions() {
      return this.OPTIONS.filter(o => !this.selectedItems.includes(o))
    }
  },
  created() { },
  mounted() {
    this.options = [...Array(25)].map((_, i) => ({
      value: (i + 10).toString(36) + (i + 1),
    }))
  },
  methods: {
    focus() {

    },
    handleChange(e) {
      console.log(e);
      console.log(1111);

    }
  },
}
</script>
<style scoped lang='scss'>
</style>
